.pay {
		height: 100vh;
		background: #E8EDF5;
		overflow: hidden;
		// display: flex;
		// flex-direction: column;
		.pay-money {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 95px;
			padding: 0 30rpx;
			background: #0559ff;
			color: #fff;
			font-size: 90rpx;
			text-align: right;
			box-sizing: border-box;
			font-feature-settings: "tnum";
			.symbol{
				margin-right: 30rpx;
			}
			
		}

		.keyboard {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.keyboard-item {
				width: calc(100% / 3 - 2rpx);
				height: 140rpx;
				font-size: 75rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 300;
				text-align: center;
				background: #fff;
				margin-right: 2rpx;
				margin-bottom: 2rpx;
        color: #212033;
			}
			.red{
				color: #FF5678;
			}

		}
		
		.pay-type{
			display: flex;
			// align-items: center;
			// justify-content: space-between;	
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 12rpx;
			margin: 0 auto;
			flex: 1;
			.item{
				width: calc(100% / 3);
				text-align: center;
				overflow: hidden;
        padding: 6px;
        box-sizing: border-box;
        font-size: 0;
				image{
					width: 100%;
          height: 120rpx;
				}
			}
      .item:first-child{
        width: calc(100% / 3 * 2 );
        height: auto;
        image{
          height: 100%;
          height: 100%;
        }
      }
      
      .item-right{
        width: calc(100% / 3);
        .item{
          width: 100%;
          height: auto;
          image{
            height: 120rpx;
          }
        }
      }
		}
		.ce{
			justify-content: center;
		}
		.sb{
			justify-content: space-between;
		}
	}
  
  
  
	
	.sun-header{
		width: 100%;
		height: 109px;
		background: #003DB0;
		display: flex;
		justify-content: space-between;
		padding: 0 36rpx;
		padding-top: 110rpx;
		box-sizing: border-box;
		.side{
			width: 58rpx;
			height: 48rpx;
		}
		.logo{
			width: 300rpx;
			height: 56rpx;
		}
		.scan{
			width: 50rpx;
			height: 50rpx;
		}
	}
	
.paying{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	.pay-mask{
		background: rgba(0, 0, 0, 0.36);
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.pay-img{
		position: absolute;
		width: 614rpx;
		height: 442rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		image{
			width: 614rpx;
			height: 442rpx;
		}
	}
	.pay-con{
		background: #fff;
		border-radius: 30rpx;
		text-align: center;
		padding: 32rpx;
		box-sizing: border-box;
		.pay-icon{
			width: 98rpx;
			height:88rpx;
			margin: 0rpx auto 20rpx;
			image{
				width: 98rpx;
				height:88rpx;
			}
		}
		.pay-title{
			font-size: 40rpx;
			color: #E34D59;
		}
		.pay-desc{
			font-size: 30rpx;
			color: #E34D59 ;
			line-height: 40rpx;
			min-height: 80rpx;
			margin-bottom: 24rpx;
			margin-top: 10rpx;
		}
		.pay-btn{
			height: 88rpx;
			background: #E34D59;
			border-radius: 18rpx;
			color: #fff;
			font-size: 32rpx;
			line-height: 88rpx;
		}
	}
}


.grabPay{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 800;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	background: #fff;
	padding: 19px 19px;
	padding-top: 65px;
	box-sizing: border-box;
	.g-title{
		font-size: 18px;
		color: #000;
		font-weight: 600;
		text-align: center;
		line-height: 31px;
		letter-spacing: 1rpx;
		width: 100%;
		text-align: center;
	}
	.g-qr{
		max-width: 300px;
		max-height: 300px;
		min-height: 200px;
		min-width: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: content-box;
		margin: 10px auto 15px;
		position: relative;
		
	}
	
	.g-scan{
		max-width: 300px;
		max-height: 300px;
		min-height: 200px;
		min-width: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: content-box;
		margin: 10px auto 15px;
		position: relative;
		
	}
  
  .g-status-image{
    width: 100%;
	text-align: center;
    image{
      width: 100%;
    }
  }
  
	.g-button{
		width: 90%;
		height: 44px;
		border-radius: 24rpx;
		background: #E34D59;
		margin:0 auto;
		margin-top:22px;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 44px;
		
	}
	.bottom-logo{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top:22px;
		image{
			width: 330rpx;
			height: 40rpx;
		}
	}
}

.sidebar{
	position: absolute;
	height: 200rpx;
	width: 200rpx;
	left: 0;
	top: 0;
	z-index: 20;
}


.head-card{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	background:#ffffff;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.img{
    font-size: 0;
    text-align: center;
    margin-top: 242rpx;
    .svg{
      width: 420rpx;
      height: 420rpx;
      animation: show 1s linear; 
    }
    @keyframes show {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .t1,.t2,.t3{
    text-align: center;
  }
  
  font-family: Poppins, Poppins;
  font-weight: 600;
  color: #000000;
  
  .t1{
    margin-top: 80rpx;
    font-size: 52rpx;
    line-height: 80rpx;
  }
  .t2{
    font-size: 113rpx;
    height: 140rpx;
    margin-bottom: 26rpx;
  }
  .t3{
    font-size: 35rpx;
    line-height: 52rpx;
  }
  
  .footer-btn {
        width: 500rpx;
        height: 88rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 100rpx;
        color: #fff;
        font-size: 32rpx;
        background: #cb5b5a;
      }
}



.pay-type-samll{
  padding: 20rpx 16rpx;
  margin: 0 auto;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item{
    width: calc(50% - 8rpx);
    height: 200rpx;
    .big-image{
      width: 100%;
      height: 100%;
    }
  }
  .small-right{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(50% - 8rpx);
    .card{
      width: calc(50% - 6rpx);
      height: 93rpx;
      margin-bottom: 14rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .card:nth-child(2n){
      // margin-left: 14rpx;
    }
  }
}